<template>
    <div class="employee-container">
        <!-- 搜索和操作区域 -->
        <div class="search-section">
            <div class="search-left">
                <el-input 
                    v-model="input" 
                    placeholder="请输入姓名" 
                    class="search-input"
                    clearable
                    @keyup.enter="searchName()"
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
                <el-button 
                    :icon="Search" 
                    @click="searchName()" 
                    type="primary"
                    class="search-btn"
                >
                    搜索
                </el-button>
            </div>
            <div class="search-right">
                <el-button 
                    type="primary" 
                    @click="editOrAdd=true;dialogFormVisible = true;"
                    class="add-btn"
                >
                    <el-icon><Plus /></el-icon>
                    新增员工
                </el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-section">
            <el-table 
                :data="Result.list" 
                style="width: 100%" 
                height="500"
                stripe
                highlight-current-row
                class="employee-table"
            >
                <el-table-column prop="username" label="账号" width="200" />
                <el-table-column prop="name" label="姓名" width="130" />
                <el-table-column prop="sex" label="性别" width="80" />
                <el-table-column prop="idNumber" label="身份证" width="200" />
                <el-table-column prop="phone" label="手机号" width="150" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="scope">
                        <div class="status-cell">
                            <el-tag 
                                :type="scope.row.status === 1 ? 'success' : 'danger'"
                                size="small"
                            >
                                {{ scope.row.status === 1 ? '启用' : '禁用' }}
                            </el-tag>
                            <el-switch
                                v-model="scope.row.status"
                                :active-value="1"
                                :inactive-value="0"
                                @change="updateEmployeeStatus(scope.row)"
                                class="status-switch"
                            />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <div class="action-buttons">
                            <el-button 
                                type="primary" 
                                :icon="Edit" 
                                @click="editOrAdd=false;dialogFormVisible = true;selectEmployee(scope.row)" 
                                size="small"
                                circle
                            />
                            <el-button 
                                type="danger" 
                                :icon="Delete" 
                                @click="deleteEmployee(scope.row)" 
                                size="small"
                                circle
                            />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-section">
            <el-pagination 
                v-model:page-size="pageSize"
                v-model:current-page="pageNum" 
                @current-change="currentPage" 
                background 
                layout="total, sizes, prev, pager, next, jumper"
                :total="Result.total"
                :page-sizes="[10, 20, 50, 100]"
                class="pagination"
            />
        </div>

        <!-- 对话框 -->
        <el-dialog 
            v-model="dialogFormVisible" 
            :title="editOrAdd ? '新增员工' : '编辑员工'" 
            width="600px"
            class="employee-dialog"
            draggable
        >
            <el-form :model="form" label-width="100px" class="form-container">
                <el-row :gutter="20">
                        <el-col :span="12">
                        <el-form-item label="账号" required>
                            <el-input v-model="form.username" placeholder="请输入用户名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" required>
                            <el-input v-model="form.name" placeholder="请输入姓名" />
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="密码" required>
                            <el-input v-model="form.password" type="password" placeholder="请输入密码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" required>
                            <el-input v-model="form.phone" placeholder="请输入手机号" />
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="身份证" required>
                            <el-input v-model="form.idNumber" placeholder="请输入身份证号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" required>
                            <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row :gutter="20">
                    <el-col :span="12" v-show="!editOrAdd">
                        <el-form-item label="状态">
                            <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                                <el-option label="禁用" :value="0" />
                                <el-option label="启用" :value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button 
                        v-if="editOrAdd" 
                        type="primary"
                        @click="dialogFormVisible = false;addEmployee()"
                    >
                        确认添加
                    </el-button>
                    <el-button 
                        v-else 
                        type="primary" 
                        @click="dialogFormVisible = false;updateEmployee();"
                    >
                        确认编辑
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
      
<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
} from '@element-plus/icons-vue';
import { onMounted, watch } from 'vue';
import axios from 'axios';
import { ref,reactive } from 'vue';

//状态切换
const value4= ref(0)



//姓名搜索功能
const input = ref('');
const searchName = () =>{
    fetchData()
}


const pageSize = ref(9);
const pageNum = ref(1);
const Result = ref([{
  list: [],
  total: 0,
}]);
//对话框操作
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const editOrAdd = ref(false);
const form = reactive({
  name: '',
  id: '',
  username: '',
  password: '',
  phone: '',
  sex: '',
  idNumber: '',
  status: '',
})

//关闭对话框重置表单
watch(dialogFormVisible, (newVal, oldVal) => {
  if (newVal === false) {
    initialForm();
  }
});
// 定义初始表单状态
const initialForm =()=> {
  form.name= '';
  form.id= '';
  form.username= '';
  form.status= '';
  form.password= '';
  form.phone= '';
  form.sex= '';
  form.idNumber= '';
}

//添加员工操作
const addEmployee = () =>{
    if(!form.idNumber){
        alert("身份证号不能为空");
        return;
    }
    axios({
        url:"/api/admin/employee",
        method:"post",
        data:{
            idNumber:form.idNumber,
            name:form.name,
            phone:form.phone,
            sex:form.sex,
            username:form.username,
            password:form.password,
        },
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        if(res.data.code==200){
            alert("添加成功");
            fetchData();
        }else{
            alert("添加失败");
        }
    })
}



//根据id查询员工
const selectEmployee = (row) => {
    axios({
        url:"/api/admin/employee/"+row.id,
        method:"get",
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        console.log(res.data.data.id);
      form.id = res.data.data.id;  
      form.name = res.data.data.name;   
      form.username = res.data.data.username;  
      form.password = res.data.data.password;  
      form.phone = res.data.data.phone;  
      form.sex = res.data.data.sex;  
      form.idNumber = res.data.data.idNumber;  
      form.status = res.data.data.status;  
    })
}
//修改员工
const updateEmployee = () =>{
    if(!form.idNumber){
        alert("身份证号不能为空");
        return;
    }
    axios({
        url:"/api/admin/employee/update",
        method:"post",
        data:{
            id:form.id,
            name:form.name,
            username:form.username,
            password:form.password,
            phone:form.phone,
            sex:form.sex,
            idNumber:form.idNumber,
            status:form.status,
        },
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        if(res.data.code==200){
            alert("修改成功");
            fetchData();
        }else{
            alert("修改失败");
        }
    })
}

//修改员工状态
const updateEmployeeStatus = (row) =>{
    axios({
        url:"/api/admin/employee/update",
        method:"post",
        data:{
            id:row.id,
            status:row.status,
        },
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        if(res.data.code==200){
            fetchData();
        }else{
            alert("修改失败");
        }
    })
}



//删除员工
const deleteEmployee =(row)=>{
    axios({
        url:`/api/admin/employee/${row.id}`,
        method:"delete",
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        if(res.data.code==200){
            alert("删除成功");
            fetchData();
        }else{
            alert("删除失败");
        }

    })
}





onMounted(() => {
  fetchData() // 页面加载时自动触发
})

const fetchData = async () => {
axios({
    url:"/api/admin/employee/page",
    method:"get",
    params:{
        name:input.value,
        pageNum:pageNum.value,
        pageSize:pageSize.value
    },
    headers:{
        token:sessionStorage.getItem('token')
    }
}).then(res=>{
    Result.value = res.data.data;
})
}

const currentPage = (newPage) =>{
    pageNum.value = newPage;
    fetchData()
};
</script>

<style scoped>
.employee-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;
}

/* 搜索区域样式 */
.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input {
  width: 300px;
}

.search-btn {
  height: 40px;
  padding: 0 20px;
}

.search-right {
  display: flex;
  align-items: center;
}

.add-btn {
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 表格区域样式 */
.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
  padding: 0 10px;
}

.employee-table {
  border-radius: 8px;
  font-size: 14px;
}

.employee-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.employee-table :deep(.el-table__row:hover) {
  background: #f0f9ff;
}

.employee-table :deep(.el-table__cell) {
  padding: 8px 6px;
}

/* 状态单元格样式 */
.status-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-switch {
  margin-left: 8px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-buttons .el-button {
  transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
  transform: scale(1.1);
}

/* 分页区域样式 */
.pagination-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  justify-content: center;
}

/* 对话框样式 */
.employee-dialog {
  border-radius: 12px;
}

.employee-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px;
}

.employee-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

.employee-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.form-container {
  max-height: 60vh;
  overflow-y: auto;
}

.form-container :deep(.el-form-item) {
  margin-bottom: 20px;
}

.form-container :deep(.el-input),
.form-container :deep(.el-select) {
  width: 100%;
}

.form-container :deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .employee-container {
    padding: 12px;
  }
  
  .search-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .search-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-input {
    width: 100%;
  }
  
  .add-btn {
    width: 100%;
    justify-content: center;
  }
  
  .employee-table {
    font-size: 12px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-buttons .el-button {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .employee-container {
    padding: 8px;
  }
  
  .search-section,
  .table-section,
  .pagination-section {
    padding: 12px;
  }
  
  .employee-dialog :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  .form-container {
    max-height: 50vh;
  }
}

/* 动画效果 */
.search-section,
.table-section,
.pagination-section {
  transition: all 0.3s ease;
}

.search-section:hover,
.table-section:hover,
.pagination-section:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* 加载状态 */
.employee-table :deep(.el-loading-mask) {
  background: rgba(255,255,255,0.9);
}

/* 空状态 */
.employee-table :deep(.el-table__empty-block) {
  padding: 40px 0;
}

.employee-table :deep(.el-table__empty-text) {
  color: #909399;
  font-size: 14px;
}
</style>